<template>
    <div class="product_list">
        <div class="header">
            <van-nav-bar :title="type" left-text="" left-arrow @click-left="handleBack" />
        </div>
        <div class="product_list_serch_text">
            <van-search class="product_list_serch1" v-model="searchValue" shape="round" background="#F6FAFF"
                placeholder="请输入商品名称" />
            <div class="product_list_serch2">
                <div style="">
                    <van-button class="product_list-btn" round @click="onSearch">搜索</van-button>
                </div>
            </div>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="list.length == 0 && !refreshing">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无数据</div>
                    </div>
                </template>
                <div v-for="(item, index) in list" :key="index" class="product_list_van_list_div">
                    <van-swipe-cell>
                        <div class="commodity_list" ref="myElement">
                            <div class="list_top" @click="handleGetDetails(item.id)">
                                <div class="list_top_img">
                                    <van-image radius="5"
                                        :src="item?.productImages ? item?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
                                    <img src="" alt="">
                                    <div class="list_top_img_tag" v-if="item?.hmMechanismsList[1]?.cooperationMode">多机制
                                    </div>
                                </div>
                                <div class="list_top_right">
                                    <div class="list_top_right_title">
                                        <div class="title">{{ item?.styleName }}</div>
                                        <div class="status"
                                            :style="computedAtatusColor(auditStatusNameById(item.auditStatus))">{{
                                                auditStatusNameById(item.auditStatus) }}</div>
                                    </div>
                                    <div class="list_top_right_introduce">{{ item?.sellingPoints }}</div>
                                    <div class="list_top_right_money">
                                        <div class="money_left">
                                            <div v-if="item?.hmMechanismsList[0].cooperationMode === '分佣'">
                                                ￥<span>{{ item?.hmMechanismsList[0].price }}</span>
                                            </div>
                                            <div v-if="item?.hmMechanismsList[0].cooperationMode === '供货'">
                                                ￥<span>{{ item?.hmMechanismsList[0].costPrice }}</span>
                                            </div>
                                            <div v-if="item?.hmMechanismsList[0].cooperationMode === '分佣'"
                                                class="commission">
                                                <span class="fonts">佣</span>
                                                <span class="numbers">
                                                    {{ item?.hmMechanismsList[0].commission }}%
                                                </span>
                                            </div>
                                        </div>
                                        <div class="money_right"
                                            v-if="item?.hmMechanismsList[0].liveStreamingMechanism">
                                            {{ item?.hmMechanismsList[0].liveStreamingMechanism }}
                                        </div>
                                    </div>
                                    <div class="list_top_right_library">
                                        <span>{{ item.recruiterDept }}</span>
                                        <span class="line">|</span>
                                        <span>{{ item.recruiter }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-swipe-cell>
                </div>
            </van-list>
        </van-pull-refresh>

    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, onUnmounted, onActivated } from "vue";
import { selectAddProductsStatistics, getShoppingListInvent, getOptListInvent, selectWarehousingProductsStatistics, getNoBigVideoListInvent } from "@/api/productList/index";
import { auditStatusNameById } from "@/utils/auditStatusFilter";
import { getEnvValue } from "@/utils/index";
import { useRoute, useRouter } from "vue-router";
import { inventList } from '@/api/productList/index'
const router = useRouter();
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    styleName: ''
});
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
const route = useRoute();

const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href


const searchValue = ref("");

/** 商品类型 */
const type: any = computed(() => {
    return route.query.type;
});
/** 开始时间 */
const startTime = computed(() => {
    return route.query.startTime;
});
/** 结束时间 */
const endTime = computed(() => {
    return route.query.endTime;
});
/** 筛选周期类型 */
const avtiveIndex = computed(() => {
    return route.query.avtiveIndex;
});
// 限制连续刷新数据重复问题
const refreFlag = ref(true)
/** 返回 */
const handleBack = () => {
    router.push({
        path: '/research/researchPage',
        query: {
            idnexs: avtiveIndex.value,
            startTime: startTime.value,
            endTime: endTime.value
        }
    })
}
/** 获取详情 */
const handleGetDetails = (id: string) => {
    router.push({
        path: `/researchProductDetail/${id}`,
    });
};
/** 搜索 */
const onSearch = () => {
    queryParams.value.styleName = searchValue.value;
    onRefresh();
};
/** 设置不同状态不同样式 */
const computedAtatusColor = (name: any) => {
    if (name.includes('待')) {
        return { backgroundColor: '#EBF4FF', color: '#0094FF' }
    } else if (name.includes('驳回') || name == '已下架' || name == '已退还') {
        return { backgroundColor: '#FDE7E7', color: '#FC2540' }
    } else {
        return { backgroundColor: '#E7FDEE', color: '#19D11B' }
    }
}
/** 查询商品列表 */
const getList = async () => {
    if (type.value == '新增商品') {
        var res = await selectAddProductsStatistics(Object.assign(queryParams.value, {
            startTime: startTime.value,
            endTime: endTime.value
        }));
    } else if (type.value == '上架商品') {
        var res = await getShoppingListInvent(Object.assign(queryParams.value, {
            startTime: startTime.value,
            endTime: endTime.value
        }));
    } else if (type.value == '主播选品') {
        var res = await getOptListInvent(Object.assign(queryParams.value, {
            startTime: startTime.value,
            endTime: endTime.value
        }));
    } else if (type.value == '成功入库') {
        var res = await selectWarehousingProductsStatistics(Object.assign(queryParams.value, {
            startTime: startTime.value,
            endTime: endTime.value
        }));
    } else if (type.value == '暂无大货') {
        var res = await getNoBigVideoListInvent(Object.assign(queryParams.value, {
            startTime: startTime.value,
            endTime: endTime.value
        }));
    } else if (type.value == '大货超期') {
        var res = await inventList(Object.assign(queryParams.value, {
            expire: '2'
        }));
    } else if (type.value == '包销临期') {
        var res = await inventList(Object.assign(queryParams.value, {
            expire: '0'
        }));
    } else if (type.value == '大货到期') {
        var res = await inventList(Object.assign(queryParams.value, {
            expire: '1'
        }));
    }
    res.rows.forEach(async (item) => {
        if (item.productImage) {
            item.productImages = getEnvValue("VITE_APP_PIC_URL") + item.productImage.split(",")[0]
        } else {
            item.productImages = "";
        }
    });
    setTimeout(() => {
        refreFlag.value = true
        // 空数据 停止加载
        if (res.rows.length == 0) {
            list.value = [];
            finished.value = true;
            return;
        }
        // 有数据 赋值列表 加载状态结束
        res.rows.forEach((item) => {
            finished.value = false;
            list.value.push(item);
        });
        loading.value = false;
        refreshing.value = false;
        // 如果list长度大于等于总数据条数，数据全部加载完成
        if (list.value.length >= res.total) {
            finished.value = true; //结束加载
        }
    }, 400);
};
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};
const vantListScrollTop = ref<any>(0) // 滚动位置
onMounted(() => {
    functionScroll('init')
});
// 在组件卸载前移除事件监听器
onUnmounted(() => {
    functionScroll('delete')
});
/** 缓存页面进度条 */
const functionScroll = (type: string) => {
    const dom: any = document.querySelector('.van-pull-refresh')
    if (type === 'init') {
        dom?.addEventListener('scroll', (e: any) => {
            vantListScrollTop.value = e.target.scrollTop
        })
    } else if (type === 'delete') {
        dom?.removeEventListener('scroll', () => { });
    } else if (type === 'black') {
        dom.scrollTop = vantListScrollTop.value
    }
}
onActivated(() => {
    functionScroll('black')
})
</script>
<script lang="ts">
export default { name: 'researchBriefingProduct' }
</script>
<style lang="less" scoped>
// .van-cell van-cell--borderless van-field van-search__field product_list_serch1
.product_list {
    width: 100%;
    height: 100vh;
    background-color: #f6faff;
    // padding-top: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .liveStreamingMechanisms {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 20px;
        background: #0094FF;
        border-radius: 2px 0px 2px 0px;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        line-height: 20px;
    }

    .product_list_serch_text {
        display: flex;
        align-items: center;
        width: 100%;
        background: #f6faff;
        height: 50px;
        position: relative;

        :deep(.van-search__field) {
            background-color: #fff;
            border-radius: 20px;
            padding-left: 15px;
        }

        .product_list_serch1 {
            display: flex;
            align-items: center;
            background: #f6faff;
            width: 100%;
            height: 35px;

            :deep(.van-search__content) {
                height: 35px;
            }

            :deep(.van-search__field) {
                height: 35px;
            }
        }

        .product_list_serch2 {
            position: absolute;
            right: 20px;

            :deep(.van-button__text) {
                font-size: 14px;
            }

            .product_list-btn {
                width: 54px;
                height: 26px;
                font-size: 14px;
                color: #ffffff;
                border: none;
                background: #0094ff;
                white-space: nowrap;
            }
        }
    }

    .nothing_div {
        width: 100%;
        margin: auto;
        text-align: center;
        margin-top: 20vh;
        font-weight: 400;
        font-size: 12px;
        color: #B8BECA;
        line-height: 12px;
        flex-wrap: wrap;

        .van-image {
            width: 160px;
            height: 160px;
        }
    }

    :deep(.van-tabs) {
        height: 23px;
        width: calc(100% - 20px);
    }

    :deep(.van-tabs__wrap) {
        height: 45px;
    }

    :deep(.van-tabs__wrap) {
        height: 45px !important;
    }

    :deep(.van-tabs__nav) {
        background-color: #eeeeee;
        // margin-top: 2px;
        padding: 0px !important;
    }

    // van-tab van-tab--line van-tab--grow van-tab--active
    :deep(.van-tabs__line) {
        display: none;
    }

    :deep(.van-tabs__nav--line) {
        height: 45px !important;
        padding-bottom: 0 !important;
    }

    :deep(.van-tab) {
        border: 1px solid #a3a3a3;
        color: #a3a3a3;
        // width: 60px;
        text-align: center;
        height: 20px;
        font-size: 12px;
        border-radius: 4px;
        line-height: 20px;
        margin-right: 10px;
    }

    :deep(.van-text-ellipsis) {
        font-size: 13px !important;
        line-height: 15px !important;
    }

    .button {
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 50px;
        z-index: 100;
        display: flex;
        line-height: 40px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .cancel {
            background: #FFFFFF;
            border: 1px solid #0094FF;
            color: #0094FF;
            border-radius: 23px;
        }

        .outbound {
            color: #fff;
            background: #0094FF;
            border-radius: 23px;
        }

        div {
            width: 150px;
            height: 40px;
            text-align: center;
        }
    }

    &_serch {
        display: flex;
        width: calc(100% - 20px);
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 23px;

        :deep(.van-image) {
            //   width: 20px;
            //   height: 20px;
            //   border: solid 1px black;
        }

        &_div {
            width: calc(100% - 20px);
            // overflow-x: scroll;
            // overflow-y: hidden;
            height: 23px;
            overflow: hidden;

            &_line {
                height: 23px;
                display: flex;
                width: 760px;
            }
        }

        &_item {
            border: 1px solid #a3a3a3;
            color: #a3a3a3;
            width: 60px;
            text-align: center;
            height: 20px;
            font-size: 12px;
            border-radius: 4px;
            line-height: 20px;
        }

        &_active {
            border: none !important;
            color: #fff;
            background-color: #1466ff;
        }
    }

    :deep(.van-pull-refresh) {
        height: calc(100vh - 140px);
        overflow: scroll;
    }

    &_van_list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        &_div {
            // width: 100%;
            // height: 80px;
            // box-sizing: border-box;
            background-color: #fff;
            // border-radius: 3px;
            // margin-bottom: 8px;
            // // padding: 5px;
            // box-sizing: border-box;
            // display: flex;
            // justify-content: space-between;

            .left_button {
                height: 100%;
            }
        }

        .div_right {
            width: calc(100% - 70px);
            display: flex;
            flex-wrap: wrap;

            .div_right_top {
                margin-top: -5px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 10px;

                .style_name {
                    font-size: 14px;
                    font-weight: bold;
                    width: 150px;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }

                .status {
                    padding: 0 5px;
                    height: 22px;
                    background: #EBF4FF;
                    border-radius: 2px;
                    text-align: center;
                    line-height: 22px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #0094FF;
                }

                .stats {
                    background: #fde7e7;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #fc2540;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats1 {
                    background: #ebf4ff;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #0094ff;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats2 {
                    background: #ebf4ff;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #0094ff;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats3 {
                    background: #ebf4ff;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #0094ff;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats4 {
                    background: #ebf4ff;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #0094ff;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats5 {
                    background: #e7fdee;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #19d11b;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats6 {
                    background: #ebf4ff;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #0094ff;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats7 {
                    background: #ebf4ff;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #0094ff;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats8 {
                    background: #ebf4ff;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #0094ff;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats9 {
                    background: #ebf4ff;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #0094ff;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats10 {
                    background: #e7fdee;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #19d11b;
                    text-align: center;
                    border-radius: 3px;
                }

                .stats11 {
                    background: #fde7e7;
                    border-radius: 2px;
                    padding: 3px 13px 3px 13px;
                    font-size: 14px;
                    color: #fc2540;
                    text-align: center;
                    border-radius: 3px;
                }
            }

            .div_right_center {
                padding-top: 5px;
                padding-left: 10px;
                width: 100%;
                height: 15px;
                font-size: 12px;
                color: #b8beca;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .div_right_bottom {
                margin-top: 5px;
                padding-left: 10px;
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: space-between;

                .price {
                    font-size: 12px;
                    color: #fc2540;
                    font-weight: 500;
                    white-space: nowrap;
                }

                .costPrice {
                    font-size: 11px;
                    color: #a3a3a3;
                    font-weight: 500;
                    white-space: nowrap;
                }

                .commission {
                    font-weight: 500;
                    font-size: 12px;
                    color: #fc2540;
                    // border: solid 1px black;
                    white-space: nowrap;
                }



                .anchor {
                    margin-left: auto;
                    padding-left: 15px;
                    font-weight: 400;
                    font-size: 12px;
                    color: #b8beca;
                    //   width: 20%;
                    //   border: 1px solid #ffb0b0;
                    //   padding: 1px 2px;
                    text-align: center;
                    white-space: nowrap;
                    /* 确保文本在一行内显示 */
                    overflow: hidden;
                    /* 隐藏溢出的内容 */
                    text-overflow: ellipsis;
                }
            }

            .liveStreamingMechanism {
                font-size: 11px;
                color: #a3a3a3;
                margin-left: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                //   width: 20%;
                // text-align: right;
            }
        }
    }

    .pop_content {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 999;
    }

    :deep(.van-nav-bar) {
        position: fixed;
        z-index: 1001;
        width: 100%;
    }

    .buttons {
        font-size: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        width: 100%;
        margin-top: 10px;

        .cancel {
            width: 162px;
            height: 44px;
            border-radius: 23px;
            border: 1px solid #1A1B1C;
            background-color: #fff;
            color: #000;
            font-size: 14px;
            color: #1A1B1C;
            line-height: 44px;
            text-align: center;
        }

        .save {
            width: 162px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            color: #FFFFFF;
            font-size: 14px;
            line-height: 44px;
            text-align: center;
        }
    }

    .launch_title {
        font-size: 14px;
        line-height: 40px;
        color: #1A1B1C;
    }

    .pop_div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;

        .pop_div_out {
            width: 25%;
            min-width: 78px;
            display: flex;
            justify-content: center;
            height: 30px;
            border-radius: 15px;
            line-height: 30px;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .pop_div_item {
            width: 78px;
            display: flex;
            justify-content: center;
            height: 30px;
            border-radius: 15px;
            line-height: 30px;
            font-size: 14px;
        }
    }
}

:deep(.van-search__field) {
    background-color: #fff;
    border-radius: 20px;
    padding-left: 15px;
}

.product_list_serch-text {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f6faff;
    height: 34px;
    padding-top: 56px;
    margin-bottom: 10px;
    //   border: solid 1px black;
}

@keyframes wrapper-gradient {
    0% {
        top: -1000px;
    }

    100% {
        top: 98px;
    }
}

.mongolian_layer {
    width: 100%;
    height: calc(100vh - 98px);
    position: absolute;
    animation: wrapper-gradient 0.4s linear;
    // z-index: 1000;

    .mongolian_layer_layer {
        width: 100%;
        height: calc(100% - 60px);
        position: absolute;
        z-index: 6000;
        background: #000000;
        opacity: 0.73;
        margin-top: 60px;

    }

    .mongolian_layer_options {
        width: 100%;
        height: 60px;
        background: #FFFFFF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        z-index: 6000;


        .mongolian_layer_div {
            width: 40%;
            height: 30px;
            border-radius: 15px;
            border: 1px solid #0094FF;
            text-align: center;
            font-size: 14px;
            color: #0094FF;
            line-height: 30px;
        }
    }
}

.product_list_serch1 {
    display: flex;
    align-items: center;
    background: #f6faff;
    width: 100%;
    height: 34px;
    //   position: relative;
}

.product_list-btn {
    width: 54px;
    height: 26px;
    font-size: 14px;
    color: #ffffff;
    border: none;
    background: #0094ff;
    white-space: nowrap;
    //   position: absolute;
}

.product_list-btn-screen {
    display: flex;
    // margin-left: 15px;
    //   width: 0px;
    // margin-right: 15px;
    display: flex;
    align-items: center;

    //   border: solid 1px black;
}

.product_list-btn-screen-image {
    width: 13px;
    height: 15px;
    background-image: url("../../assets/home/icon_shaixuan.png");
    background-size: 100% 100%;

    //   background-size: 100% 100%;
}

.product_list-btn-screen-text {
    display: flex;
    align-items: center;
    // width: 28px;
    height: 18px;
    font-size: 14px;
    color: #1a1b1c;
    margin-left: 5px;
}

.product_list_serch {
    background: #fff;
    height: 45px;
    margin: 0 !important;
}

:deep(.van-tab__text) {
    background: none !important;
    //   border-bottom: #0094ff solid 3px !important;
    //   border: solid 1px black !important;
    //   height: 50px !important;
}

:deep(.van-tab--grow) {
    font-size: 14px !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: #fff !important;
    border-radius: 0 !important;
    // border: none !important;
}

:deep(.van-tab--grow) {
    height: 40px;
}

// van-tabs__nav van-tabs__nav--line
// van-tabs__nav van-tabs__nav--line
:deep(.van-tab--active) {
    // border: solid 1px black !important;
    height: 40px !important;
    // margin-top: 10px !important;
    background: #fff !important;
    color: #0094ff !important;
    font-size: 14px !important;

    background-color: #1466ff;
    // padding-bottom: 15px;
    // border: solid 1px black !important;
    border-bottom: #0094ff solid 3px !important;
    z-index: 999;
}

:deep(.van-tabs__wrap) {
    background: #fff !important;
}

:deep(.van-tabs__nav--complete) {
    background: #fff !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 3px;
    margin-top: -3px;
}

.van-image {
    width: 74px;
    height: 74px;
}

.van-tabs--line {
    height: 45px !important;
    margin-left: 10px;
}

.product_list_van_list {
    // margin-top: 10px;
    background: #f6faff;
}

.commodity_list {
    display: flex;
    flex-flow: column;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    width: 100%;
    // background: #fff;
    // margin-bottom: 15px;

    .list_top {
        display: flex;
        align-items: flex-start;
        height: 120px;

        .list_top_img {
            position: relative;
            margin-right: 5px;

            .van-image {
                width: 120px;
                height: 120px;
            }

            .list_top_img_tag {
                width: 50px;
                height: 20px;
                line-height: 20px;
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF;
                text-align: center;
                background: #0094FF;
                border-radius: 2px 0px 2px 0px;
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .stock_doce {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 120px;
                height: 24px;
                background: #E7FDEE;
                border-radius: 0px 0px 5px 5px;
                font-weight: 500;
                font-size: 14px;
                color: #19D11B;
                text-align: center;
                line-height: 24px;
            }
        }

        .list_top_right {
            flex: 1;
            min-width: 0;
            display: flex;
            min-width: 0;
            flex-flow: column;
            height: 120px;
            flex-wrap: wrap;
            justify-content: space-between;

            .list_top_right_title {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .status {
                    padding: 0 5px;
                    height: 22px;
                    background: #EBF4FF;
                    border-radius: 2px;
                    text-align: center;
                    line-height: 22px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #0094FF;
                }

                .remove {
                    width: 65px;
                    height: 22px;
                    background: #FDE7E7;
                    border-radius: 2px 0px 0px 2px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FC2540;

                    .van-image {
                        width: 17px;
                        height: 19px;
                        margin-right: 5px;
                    }
                }

                .title {
                    flex: 1;
                    min-width: 0;
                    margin-right: 15px;
                    font-weight: 500;
                    font-size: 16px;
                    color: #1A1B1C;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }


            }

            .list_top_right_introduce {
                width: 100%;
                font-weight: 400;
                font-size: 12px;
                color: #B8BECA;
                // margin-bottom: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .list_top_right_money {
                display: flex;
                align-items: flex-end;
                justify-content: flex-start;

                .money_left {
                    font-weight: 500;
                    font-size: 14px;
                    color: #FC2540;
                    display: flex;
                    align-items: flex-end;

                    &>div:first-child {
                        margin-right: 10px;

                        span {
                            font-size: 18px;
                        }
                    }

                    .commission {
                        margin-right: 10px;

                        .fonts {
                            display: inline-block;
                            width: 22px;
                            height: 16px;
                            background: #1B1714;
                            text-align: center;
                            line-height: 16px;
                            border-radius: 2px;
                            font-weight: 400;
                            font-size: 12px;
                            color: #CEA46C;
                        }

                        .numbers {
                            display: inline-block;
                            width: 37px;
                            height: 16px;
                            background: linear-gradient(136deg, #E9D1A5 0%, #CEA46C 100%);
                            border-radius: 2px;
                            font-weight: 500;
                            font-size: 12px;
                            color: #1B1714;
                            text-align: center;
                            line-height: 16px;
                        }
                    }

                }

                .money_right {
                    border-radius: 2px;
                    border: 1px solid #FF5A1A;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FF5A1A;
                    height: 16px;
                    text-align: center;
                    line-height: 16px;
                    // flex: 1;
                    // width: 40px;
                    min-width: 40px;
                    max-width: 70px;
                    // width: 60px;
                    box-sizing: border-box;

                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;

                }
            }

            .list_top_right_times {
                width: 100%;
                font-weight: 400;
                font-size: 12px;
                color: #8492AD;
            }

            .list_top_right_return_product {
                width: 100%;
                display: flex;
                align-items: center;

                .title {
                    width: 40px;
                    height: 15px;
                    background: #0094FF;
                    border-radius: 2px;
                    font-weight: 400;
                    font-size: 10px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 15px;
                }

                .number {
                    display: flex;
                    align-items: center;
                    height: 15px;
                    background: #EBF4FF;
                    border-radius: 2px;
                    box-sizing: border-box;
                    padding: 0 5px;
                    font-weight: 500;
                    font-size: 10px;
                    line-height: 15px;

                    .color {
                        color: #0094FF;
                    }

                    .total {
                        color: #8492AD;
                        // margin-top: -2px;
                    }
                }

                .van-image {
                    width: 14px;
                    height: 14px;
                    margin-left: 10px;
                }
            }

            .list_top_right_bottom {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .specs {
                    font-weight: 400;
                    font-size: 12px;
                    color: #8492AD;
                    width: calc(100% - 30px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }

                .van-image {
                    width: 24px;
                    height: 24px;
                }
            }

            .list_top_right_library {
                display: flex;
                align-items: center;

                font-weight: 400;
                font-size: 12px;
                color: #8492AD;

                .line {
                    margin: 0 5px;
                }

                .inventory {
                    display: flex;
                    align-items: center;

                    .label {
                        width: 30px;
                        height: 15px;
                        background: #0094FF;
                        border-radius: 2px;
                        text-align: center;
                        line-height: 15px;
                        font-weight: 400;
                        font-size: 10px;
                        color: #FFFFFF;
                    }

                    .value {
                        width: 33px;
                        height: 15px;
                        background: #EBF4FF;
                        border-radius: 2px;
                        text-align: center;
                        line-height: 15px;
                        font-weight: 500;
                        font-size: 10px;
                        color: #0094FF;
                    }
                }

                .sales {
                    display: flex;
                    align-items: center;
                    margin-left: 10px;

                    .label {
                        width: 55px;
                        height: 15px;
                        background: #0094FF;
                        border-radius: 2px;
                        text-align: center;
                        line-height: 15px;
                        font-weight: 400;
                        font-size: 10px;
                        color: #FFFFFF;
                    }

                    .value {
                        width: 33px;
                        height: 15px;
                        background: #EBF4FF;
                        border-radius: 2px;
                        text-align: center;
                        line-height: 15px;
                        font-weight: 500;
                        font-size: 10px;
                        color: #0094FF;
                    }
                }
            }
        }
    }

    .list_text {
        display: flex;
        flex-flow: column;

        .list_text_p {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .list_text_p_left {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
            }

            .list_text_p_right {
                font-weight: 400;
                font-size: 14px;
                color: #B8BECA;
                flex: 0.8;
                text-align: right;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .list_text_p_number {
                font-weight: 500;
                font-size: 14px;
                color: #0094FF;
            }

            .list_text_p_yard {
                font-weight: 500;
                font-size: 14px;
                color: #19D11B;
            }
        }
    }

    .list_text_cy {
        display: flex;

        .list_text_p_cy {
            margin-top: 10px;
            display: flex;
            align-items: center;
            width: 63%;
        }

        .list_text_p_cys {
            margin-top: 10px;
            display: flex;
            align-items: center;
            width: 37%;
            justify-content: flex-end;
        }

        .list_text_p_left_cy {
            font-weight: 400;
            font-size: 14px;
            color: #B8BECA;
        }

        .list_text_p_right_cy {
            font-weight: 400;
            font-size: 14px;
            color: #B8BECA;
            flex: 0.8;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .list_text_p_number_cy {
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
        }
    }

    .describe {
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        .describe_left {
            display: flex;
        }

        .describe_div {
            width: 61px;
            height: 22px;
            font-weight: 500;
            font-size: 12px;
            color: #19D11B;
            display: flex;
            align-items: center;
            border-radius: 13px;
            justify-content: space-around;
            box-sizing: border-box;
            padding: 0 6px;
            line-height: 22px;

            .van-image {
                width: 12px;
                height: 12px;
            }
        }

        .describe_department {
            padding: 0 5px;
            height: 22px;
            background: #EBF4FF;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-left: 5px;
            box-sizing: border-box;

            .van-image {
                width: 12px;
                height: 12px;
            }

            .coreName {
                line-height: 22px;
                font-weight: 500;
                font-size: 12px;
                color: #0094FF;
                margin-left: 5px;
            }
        }

        .warehousing_button {
            width: 84px;
            height: 24px;
            background: #0094FF;
            border-radius: 2px;
            text-align: center;
            line-height: 24px;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
        }
    }
}

:deep(.van-action-sheet__header) {
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #1a1b1c !important;
    // border: solid 1px black !important;
}

:deep(.van-action-sheet__item) {
    font-size: 14px;
    color: #b8beca;
}

:deep(.van-swipe-cell) {
    width: 100%;
    height: 100%;
}

:deep(.van-swipe-cell__wrapper) {
    height: 100%;
    display: flex;
    align-items: center;
    // padding: 0 10px;
}

:deep(.van-checkbox) {
    overflow: visible;
}
</style>